<template>
 <div class="mainContent">
   <div class="chatHeader">
     <div class="title">{{ destUserId }}</div>
     <div class="control-box">
       <i-logout theme="outline" size="30" fill="#333" @click="logout"/>
     </div>
   </div>
   <div class="chatContent">
     <!--<template v-if="chatList.length>0">
       <p v-for="(item,index) in chatList" :key="index">
         {{item}}
       </p>
     </template>
     -->
        <template v-if="chatList.length>0">
          <template v-for="(item,index) in chatList">
            <template v-if="item.srcUserId===destUserId">
              <el-row class="destination">
                <el-col :span="1"><el-avatar shape="square" :size="50" class="contactorHeader"/></el-col>
                <el-col :span="12"><div class="destMsg">{{ item.msgBody }}</div></el-col>
              </el-row>
            </template>
            <template v-else>
              <el-row class="source">
                <el-col :span="11"></el-col>
                <el-col :span="12" style="text-align: right;"><div class="sourceMsg">{{ item.msgBody }}</div></el-col>
                <el-col :span="1"><el-avatar shape="square" :size="50" class="contactorHeader" /></el-col>
              </el-row>
            </template>
          </template>
        </template>


   </div>
   <div class="chatInput">

     <el-input
         class="msgArea"
         v-model="msg"
         :rows="5"
         resize="none"
         type="textarea"
         placeholder="Please input"
         @keyup.enter="sendMsg()"
     ></el-input>
     <el-button v-on:click="sendMsg()">发送(S)</el-button>
   </div>
 </div>
</template>

<script>

import emitter from "../../sysConfig/bus.js";
import store from "../../sysConfig/store.js";
export default {
  name: "RightContent",
  data(){
    return{
      destUserId:"",
      curUser:"",
      msg:"",

    }
  },
  mounted() {
    this.rcvDestUserId();
    this.curUser=store.userId;

  },
  beforeUnmount() {
    this.clearEvent();
  },
  computed:{
    chatList:function (){
      let chatHistoryList= store.chatHistory.filter(e=>(e["srcUserId"]===store.userId&&e["destUserId"]===store.destUserId)||(e["destUserId"]===store.userId&&e["srcUserId"]===store.destUserId));
      return chatHistoryList;//store.chatHistory;
    }
  },
  methods:{
    logout:function (){
      this.$router.push("/")
    },
    rcvDestUserId:function (){
      emitter.on("destUserId",(value)=>{
        this.destUserId=value;//当前选中的是哪个账号
        store.setDestUserId(this.destUserId);
      });
    },
    sendMsg:function (){

      let rlsMsg=this.msg.replace(/\n$/, "");
      emitter.emit("sendMsgEvt",rlsMsg);
      this.msg="";
    },
    clearEvent:function (){
      emitter.off("destUserId");
    }

  }

}
</script>

<style scoped>

</style>